<template>
  <div>
    <el-menu :default-active="activeIndex" class="top-bar" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">
        <router-link :to="{ name: 'role1Homepage' }">
          <div @click="setAsideVisible(false)">
            <i class="el-icon-house"></i>
            首页（项目）
          </div>
        </router-link>
      </el-menu-item>

      <el-menu-item index="2">
        <router-link :to="{ name: 'role1Monone' }">
          <div @click="setAsideVisible(true)">
            <i class="el-icon-video-camera"></i>
            设备
          </div>
        </router-link>
      </el-menu-item>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-user"></i> 人员
        </template>

        <router-link :to="{ name: 'role1Manone' }">
          <el-menu-item @click="setAsideVisible(false)" index="3-1">
            <i class="el-icon-document"></i>
            人员信息
          </el-menu-item>
        </router-link>

        <!-- <router-link :to="{ name: 'role1Mantwo' }">
          <el-menu-item @click="setAsideVisible(false)" index="3-2">
            <i class="el-icon-search"></i>
            人员审核
          </el-menu-item>
        </router-link> -->

        <router-link :to="{ name: 'role1Perone' }">
          <el-menu-item @click="setAsideVisible(false)" index="3-3">
            <i class="el-icon-notebook-2"></i>
            人员列表
          </el-menu-item>
        </router-link>

        <router-link :to="{ name: 'role1Attendance' }">
          <el-menu-item @click="setAsideVisible(false)" index="3-4">
            <i class="el-icon-circle-check"></i>
            人员签到
          </el-menu-item>
        </router-link>
      </el-submenu>

      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-files"></i>
          统计
        </template>

        <router-link :to="{ name: 'role1Inone' }">
          <el-menu-item @click="setAsideVisible(false)" index="4-1">
            <i class="el-icon-sort"></i>
            进出操作
          </el-menu-item>
        </router-link>

        <router-link :to="{ name: 'role1Intwo' }">
          <el-menu-item @click="setAsideVisible(false)" index="4-2">
            <i class="el-icon-tickets"></i>
            详情出入
          </el-menu-item>
        </router-link>

        <router-link :to="{ name: 'role1Inthree' }">
          <el-menu-item @click="setAsideVisible(false)" index="4-3">
            <i class="el-icon-document-delete"></i>
            旷工表
          </el-menu-item>
        </router-link>

        <router-link :to="{ name: 'role1Infour' }">
          <el-menu-item @click="setAsideVisible(false)" index="4-4">
            <i class="el-icon-document-checked"></i>
            签到表
          </el-menu-item>
        </router-link>

        <router-link :to="{ name: 'role1Infive' }">
          <el-menu-item @click="setAsideVisible(false)" index="4-5">
            <i class="el-icon-warning-outline"></i>
            异常表
          </el-menu-item>
        </router-link>
      </el-submenu>

      <el-menu-item index="5">
        <router-link :to="{ name: 'role1Viewpage' }">
          <div @click="setAsideVisible(false)">
            <i class="el-icon-data-line"></i>
            可视化
          </div>
        </router-link>
      </el-menu-item>

      <div class="right-bar" style="height: 61px;float: right; display: flex;">
        <div class="avatar" style="display: flex; align-items: center;margin-right: 15px;">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </div>

        <div class="info-display" style="align-items: center;display: flex;margin-right: 10px;">
          <el-dropdown>
            <span>
              欢迎您：{{ showId }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click="quit()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

    </el-menu>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  name: "Topbar",
  props: {

  },
  methods: {
    handleClick() {
      // 处理按钮点击事件的逻辑
      console.log('按钮被点击了！');
    },
    ...mapMutations({
      setAsideVisible: 'setAsideVisible'
    })
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
</style>